<template>
  <div>
    <div class="tabs">
      <div class="left">
        <i class="el-icon-arrow-left" @click="moveLeft"></i>
      </div>
      <div class="tags-container">
        <div class="tags" ref="tags">
          <el-tag
            size="middle"
            v-for="(item, index) in tags"
            :key="item.path"
            :closable="item.name !== 'home'"
            :effect="$route.name === item.name ? 'dark' : 'plain'"
            @click="changeMenu(item)"
            @close="handleClose(item, index)"
            @contextmenu.prevent.native="openMenu(item, $event,index)"
          >
            {{ item.label }}
          </el-tag>
        </div>
      </div>
      <div class="right">
        <i class="el-icon-arrow-right" @click="moveRight"></i>
      </div>
    </div>

    <div
      v-show="visible"
      @click.stop="onMenuMaskClick"
      @contextmenu="openMaskMenu"
      style="
        z-index: 99999;
        position: fixed;
        background: rgba(0, 0, 0, 0.01);
        width: 100vw;
        height: 100vh;
        top: 0px;
        left: 0px;
      "
    >
      <ul
        class="contextmenu"
        style="z-index: 99999; background: white"
        :style="{ left: left + 'px', top: top + 'px' }"
      >
        <li @click="closeSelectTag">关闭</li>
        <!-- <br /> -->
        <!-- <li @click="closeOthersTags">关闭其他</li> -->
        <!-- <br /> -->
        <!-- <li @click="refreshFn">刷新</li> -->
        <!-- <br /> -->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonTag',
  data () {
    return {
      panelWidth: 0,
      beginPos: 0,
      visible: false,
      top: 0,
      left: 0,
      selectedItem: undefined,
      translateX: 0,
      isAtEnd: false,
      selectedItemIndex: null
    }
  },
  computed: {
    tags () {
      return this.$store.state.tab.tabList
    }
  },
  methods: {
    moveLeft () {
      console.log(this.$refs.tags.offsetWidth)
      if (this.translateX < 0) {
        this.translateX += 100
        console.log(document.querySelector('.tags').style.transform)
        const tagsContainer = document.querySelector('.tags')
        tagsContainer.style.transform = `translateX(${
          this.translateX
        }px)`
        this.isAtEnd = false
      }
    },
    moveRight () {
      if (!this.isAtEnd) {
        this.translateX -= 100
        const tagsContainer = document.querySelector('.tags')
        tagsContainer.style.transform = `translateX(${
          this.translateX
        }px)`
        console.log(document.querySelector('.tags').style.transform)
        // 判断是否已经到了最右边
        const tagsWidth = tagsContainer.scrollWidth
        const containerWidth = tagsContainer.clientWidth
        console.log(tagsWidth)
        console.log(containerWidth)
        if (Math.abs(this.translateX) >= tagsWidth - containerWidth) {
          this.isAtEnd = true
        }
      }
    },
    // 点击tag标签进行页面跳转
    changeMenu (item) {
      //   this.$router.push(item.path)
      this.$router.push({ name: item.name })
    },

    // 删除tag标签
    handleClose (item, index) {
      // 调用vux里的删除方法
      this.$store.commit('closeTag', item)

      //   进行删除之后的跳转
      //   删除的非当前激活项
      if (item.name !== this.$route.name) {
      }
      //   删除的是最后一项，向前一个跳转
      // 因为先删除，所以tags.length是删除后的长度
      if (index === this.tags.length) {
        this.$router.push({
          name: this.tags[index - 1].name
        })
      } else {
        //  删除的不是最后一项，向后一个跳转
        this.$router.push({
          name: this.tags[index].name
        })
      }
    },

    openMenu (item, e, index) {
      this.visible = true
      this.selectedItem = item
      this.selectedItemIndex = index
      this.left = e.clientX
      this.top = e.clientY
    },
    openMaskMenu (e) {
      e.preventDefault()
    },
    onMenuMaskClick () {
      this.visible = false
    },

    closeSelectTag () {
      if (this.selectedItem != null) this.handleClose(this.selectedItem, this.selectedItemIndex)
      this.visible = false
    },
    closeOthersTags () {
      this.selectedItem
        ? this.closeOtherTags(this.selectedItem.menuId)
        : this.clearAllTags()
      this.visible = false
    },

    refreshFn () {
      console.log(this.selectedItem)
      this.removeCachePage(this.selectedItem.formRouterName)
      this.$router.push({
        path: '/main/firstPage'
      })

      this.$nextTick((_) => {
        this.addCachePage(this.selectedItem.formRouterName)
        this.$router.push({
          path: '/main/' + this.selectedItem.formRouterName
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tabs {
  height: 32px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0 0;
}

.left {
  width: 16px;
  // background-color: lightblue;
  line-height: 32px;
  cursor: pointer;
}

.right {
  width: 16px;
  // background-color: lightcoral;
  line-height: 32px;
  cursor: pointer;
}

.tags-container {
  flex: 1;
  overflow: hidden;
}

.tags {
  display: flex;
  position: relative;
  transition: transform 0.3s ease;
  .el-tag {
    margin-right: 5px;
    cursor: pointer;
  }
}
//.tabs {
//   padding: 20px;
// .el-tag {
//     margin-right: 15px;
//     cursor: pointer;
//   }
// }

.contextmenu {
  margin: 0px;
  z-index: 2;
  position: fixed;
  list-style-type: none;
  padding: 5px 0px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  width: 8vw;
}

.contextmenu li {
  width: 100%;
  margin: 0px;
  padding: 7px 16px;
  cursor: pointer;
}

.contextmenu li:hover {
  background: #eee;
}
</style>
